<template>
    <div class="detail-landlord">
        <detail-section title="房东介绍" more-text="查看房东主页">
            <div class="landlord-inner">
                <div class="top">
                    <img :src="landlordDate.topScroll" alt="">
                </div>
                <div class="header">
                    <div class="left">
                        <img class="logo" :src="landlordDate.hotelLogo" alt="">
                    </div>
                    <div class="centre">
                        <div class="name">{{ landlordDate.hotelName }}</div>
                        <div class="tips">
                            <template v-for="item in landlordDate.hotelTags">
                                <span class="text">{{ item.tagText.text }}</span>
                            </template>
                        </div>
                    </div>
                    <div class="right">联系房东</div>
                </div>
                <div class="bottom">
                    <template v-for="item in landlordDate.hotelSummary">
                        <div class="item">
                            <span class="title">{{ item.title }}</span>
                            <span class="introduction">{{ item.introduction }}</span>
                            <span class="tip">{{ item.tip }}</span>
                        </div>
                    </template>
                </div>
            </div>
        </detail-section>
    </div>
</template>

<script setup>
    import detailSection from '@/components/detail-section/detail-section.vue';

    defineProps({
        landlordDate:{
            type:Object,
            default:() => ({})
        }
    })
</script>


<style lang='less' scoped>
.landlord-inner {
    .top {
        img {
            width: 100%;
            border-radius: 4px;
        }
    }
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 6px 0;
        .left {
            img {
                width: 58px;
            }
        }
        .centre {
            flex: 1;
            .name {
                font-weight: 600;
                font-size: 18px;
            }
            .tips {
                .text {
                    font-size: 13px;
                    color: #888;

                    &:nth-child(2) {
                        padding: 0 8px;
                        border-left: 1px solid #888;
                        border-right: 1px solid #888;
                        margin: 0 6px;
                    }
                }
            }
        }
        .right {
            padding: 4px 12px;
            background-color: orange;
            color: #fff;
            font-size: 14px;
            border-radius: 6px;
        }
    }
    .bottom {
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item {
            display: flex;
            flex-direction: column;
            font-size: 13px;
            color: #666;
            .introduction {
                font-size: 16px;
                color: #000;
                font-weight: 600;
                margin: 4px 0;
            }
        }
    }
}
</style>